<template>
    <div class="divBox">
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
<!--                  <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
<!--                  <span class="ivu-pl-8">订单</span>-->
                  <div class="header_title">重点投资项目类型</div>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChangeProjectType">
                    <el-radio-button  v-for="item in yearList" :key="item" :label="item" :value="item">{{item}}年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesProjectType"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">重点投资项目状态</div>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="visitDate1" class="ivu-mr-8" @change="radioChangeProjectStatus">
                    <el-radio-button  v-for="item in yearList" :key="item" :label="item" :value="item">{{item}}年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesProjectStatus"></echarts-from>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">重点项目近五年各类型数量统计</div>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataProjectType" :seriesData="seriesProjectType1" :xAxis="xAxisProjectType" :legendData="legendDataProjectType"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">争取资金完成情况表（万元）</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <el-table :data="listData.fundList" size="mini" height="475px" style="overflow-y: auto;" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
              <el-table-column label="单位名称" prop="departmentText" min-width="120" align="center"/>
              <el-table-column label="年度计划" prop="taskPlan" min-width="120" align="center"/>
              <el-table-column label="目前落实资金笔数" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.sumCount}}</span>
                </template>
              </el-table-column>
              <el-table-column label="目前落实资金总额" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.sumAll}}</span>
                </template>
              </el-table-column>
              <el-table-column label="已完成百分比" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.rate}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">招商引资任务完成情况表</div>
                </div>
                <div class="checkTime" hidden>
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="year">2019年</el-radio-button>
                    <el-radio-button label="last301">2020年</el-radio-button>
                    <el-radio-button label="week">2021年</el-radio-button>
                    <el-radio-button label="month">2022年</el-radio-button>
                    <el-radio-button label="last30">2023年</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <el-table :data="listData.businessList" size="mini" height="475px" style="overflow-y: auto;" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
              <el-table-column label="单位名称" prop="departmentText" min-width="120" align="center"/>
              <el-table-column label="年度计划" prop="taskPlan" min-width="120" align="center"/>
              <el-table-column label="目前落实资金笔数" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.sumCount}}</span>
                </template>
              </el-table-column>
              <el-table-column label="目前落实资金总额" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.sumAll}}</span>
                </template>
              </el-table-column>
              <el-table-column label="已完成百分比" min-width="120" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.rate}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">系统概览</div>
                </div>
              </div>
            </div>
            <div class="special-chat" ref="visitChart">
              <img :src="statisticsBg">
              <div class=special-chat-box>
                <div class="line-box">
                  <div class="chat-line">注册用户数量：{{seriesUser.userCount}}</div>
                  <div class="chat-line">营商环境单位：{{seriesUser.departmentCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">调查问卷回收：{{seriesUser.questionCount}}</div>
                  <div class="chat-line">意见建议数量：{{seriesUser.ideaCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">重点投资项目：{{seriesUser.projectCount}}</div>
                  <div class="chat-line">重点工作任务：{{seriesUser.keyWorkCount}}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  chartOrder30Api,
  chartOrderWeekApi,
  chartOrderMonthApi,
  chartOrderYearApi,
  viewModelApi, chartProjectTypePie, chartProjectStatusPie,chartProjectTypeApi,chartDataFundList,chartDataBusinessList,chartUserOverview
} from '@/api/dashboard';
  import echartsFrom from '@/components/echarts/index';
  import { checkPermi } from "@/utils/permission"; // 权限判断函数

  export default {
    components: {echartsFrom},
    data() {
      return {
        //info: {},
        infoList: null,
        statisticsBg:require("@/assets/imgs/statistic_bg.jpg"),

        seriesProjectType:[],
        seriesProjectStatus:[],
        yearList:[],
        visitDate: '',
        visitDate1: '',

        seriesProjectType1: [],
        xAxisProjectType: [],
        legendDataProjectType: [],
        yAxisDataProjectType:[],

        listData:{
          fundList:[],
          businessList:[]
        },

        seriesUser:[],
      }
    },
    mounted(){
      this.yAxisDataProjectType = [
        {
          type: 'value',
          name: '数量趋势',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '重点投资项目数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
    },
    methods: {
      checkPermi,

      initYearList(){
        this.loading = true

        let myDate = new Date();
        let thisYear = myDate.getFullYear();
        this.visitDate = thisYear
        this.visitDate1 = thisYear
        for (let i=0;i<3;i++){
          this.yearList.push(thisYear-i)
        }
        this.loading = false
      },
      //饼图
      statisticsProjectTypePie(){
        chartProjectTypePie({year:this.visitDate}).then(async res => {
        /*let res = {
          "typeList": [
            {
              "name": "续建",
              "value": 60
            },
            {
              "name": "新建",
              "value": 33
            },
          ],
          "statusList": [
            {
              "name": "未开工",
              "value": 15
            },
            {
              "name": "正在建设",
              "value": 69
            },
            {
              "name": "已完工",
              "value": 19
            },
          ]
        }*/
          this.seriesProjectType = res;
        })
      },
      statisticsProjectStatusPie(){
        chartProjectStatusPie({year:this.visitDate1}).then(async res => {
          this.seriesProjectStatus = res;
        })
      },
      radioChangeProjectType(val){
        this.statisticsProjectTypePie({year:val})
      },
      radioChangeProjectStatus(val){
        this.statisticsProjectStatusPie({year:val})
      },
      //柱状图
      chartProjectType() {
        this.xAxisProjectType = []
        this.legendDataProjectType = []
        chartProjectTypeApi().then(async res => {
        //后期接口调用
        /*var res = {
          "typeData":{"2019":[0,0,0],"2020":[120,110,10],"2021":[151,115,30],"2022":[130,210,70],"2023":[110,320,20]},
          "numData":{"2019":303,"2020":230,"2021":266,"2022":340,"2023":430},
        };*/

        //this.info = res
        let num = []
          let nums1 = []
          let nums2 = []
          let nums3 = []
        for (let key  in res.typeData) {
          nums1.push(Number(res.typeData[key][0]))
          nums2.push(Number(res.typeData[key][1]))
          nums3.push(Number(res.typeData[key][2]))
          this.xAxisProjectType.push(key)
        }
        for (let key  in res.numData) {
          num.push(Number(res.numData[key]))
        }
        this.legendDataProjectType = ['蓝灯项目','黄灯项目','红灯项目']
        this.seriesProjectType1 = [{
          name:"蓝灯项目",
          type:"bar",
          stack: 'Ad',
          barWidth: '50px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#26c6ff',
            }
          },
          data: nums1
        }, {
          name:"黄灯项目",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#fdd22d',
            }
          },
          data: nums2
        }, {
          name:"红灯项目",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'red',
            }
          },
          data: nums3
        },{
          name:"数量趋势",
          type:"line",
          smooth: true,
          itemStyle:{
            normal:{
              color:'#1890ff',
            }
          },
          yAxisIndex: 1,
          data: num
        }]
        })
      },
      //列表
      chartDataFundList(){
        chartDataFundList().then(async res => {
          this.listData.fundList = res
        })
      },
      chartDataBusinessList(){
        chartDataBusinessList().then(async res => {
          this.listData.businessList = res
        })
      },
      chartUser(){
        chartUserOverview().then(async res => {
          //let res = {"userCount":107,"visitCount":3063,"activeUserCount":88,"photoCount":1102,"yesUserCount":55,"yesPhotoCount":542}
          this.seriesUser = res;
        })
      },

      // 时间改变
      handleChangeVisitType() {
        this.xAxis = []
        this.legendData = []
        //chartOrder30Api().then(async res => {
        //后期接口调用
        let res = {
          "price":{"09-24":"110","09-25":"294","09-26":"0","09-27":"100","09-28":0,"09-29":"269","09-30":"294","10-01":"0","10-02":0,"10-03":"323","10-04":"614","10-05":"750","10-06":"811","10-07":"100","10-08":"295","10-09":"0","10-10":"218","10-11":"511","10-12":"994","10-13":0,"10-14":"681","10-15":"0","10-16":"100","10-17":"0","10-18":"315","10-19":"0","10-20":"106","10-21":"0","10-22":"946","10-23":"50","10-24":"477"},
          "quality":{"09-24":30,"09-25":20,"09-26":10,"09-27":30,"09-28":0,"09-29":40,"09-30":40,"10-01":10,"10-02":0,"10-03":10,"10-04":50,"10-05":170,"10-06":90,"10-07":30,"10-08":340,"10-09":20,"10-10":100,"10-11":3,"10-12":6,"10-13":0,"10-14":64,"10-15":1,"10-16":2,"10-17":2,"10-18":5,"10-19":4,"10-20":4,"10-21":4,"10-22":13,"10-23":9,"10-24":3}
        };

          //this.info = res
          let pices = []
          let qualitys = []
          for (let key  in res.price) {
            pices.push(Number(res.price[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.legendData = ['试验数','成功数']
          this.series = [{
            name:"试验数",
            type:"bar",
            itemStyle:{
              normal:{
                  color:'#5B8FF9',
              }
            },
            data: pices
          },
            {
              name:"成功数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{
                  color:'#4BCAD5',
              }
              },
              yAxisIndex: 1,
              data: qualitys
            }]
        //})
      },

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      }
    },
    created() {
      this.initYearList()
      this.statisticsProjectTypePie()
      this.statisticsProjectStatusPie()
      this.chartProjectType()
      this.chartDataFundList()
      this.chartDataBusinessList()
      this.chartUser()

      //this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .special-chat{
    width:100%;
    height:294px;
    position: relative;
    img{
      width:100%;
      height:100%;
      position: absolute;
    }

    .special-chat-box{
      width:100%;
      position: absolute;
      .line-box{
        height:calc(294px / 3);
        line-height:calc(294px / 3);
        display:flex;
        justify-content: space-around;
        .chat-line{
          font-size:18px;
          font-weight:bold;
        }
        .chat-line:nth-child(2){
          color:#fff;
          padding-left:20%;
        }
      }
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    //padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 0px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
